<template>
    <div class="container">
        <my-search :fields="fieldsList" :baseNumber="4" @onSearch="searchForm" @onReset="resetForm" />
        <div class="btn" v-if="this.userSwjgDm =='11300000000'">
            <el-button type="info" plain size="mini" @click="go('add')">新增</el-button>
            <el-button type="info" plain size="mini" @click="del()">删除</el-button>

        </div>
        <div class="table-list">
            <my-table v-loading="loading" ref="myEltable" style="width: 100%" row-key="id" :showsummary="false" :columns="tableColumns" :tableData="tableDatas" :pageNum="queryObj.pageNo" :pageSize="queryObj.pageSize" :totalPage="total" :height="$store.state.app.windowHeight - 210" max-height="660px" :current="false" @onCurrentChange="changepageNo" @onPageSizeChange="changePageSize" highlight-current-row :ifSelect="true" @onSelectionChange="onSelectionChange" />
        </div>
    </div>
</template>

<script>
import { queryList, xf, cx, sc, queryList_att, upload_hyxxk, add_hyxxk } from '@/api/zcgj/gxbg'
import { getUserInfo } from '@/utils/auth'
export default {
    name: 'gxbg-list',

    data() {
        return {
            loading: false,
            fieldsList: [
                {
                    label: '表格名册:',
                    field: 'bgmc',
                    type: 'text',
                    value: '',

                },

                {
                    label: '创建日期',
                    field: 'date',
                    type: 'daterange', // daterange
                    value: [],
                    options: [
                        {
                            field: 'kssj',
                            value: ''
                        },
                        {
                            field: 'jssj',
                            value: ''
                        }
                    ],
                    change: value => {
                        // this.changxm(value);
                    }
                }
            ],
            //右侧表格开始
            tableColumns: [
                {
                    label: '表格名册',
                    prop: 'bgmc',
                    align: 'center',
                    minWidth: 220,

                },
                {
                    label: '填报截止日期',
                    prop: 'tbjzrq',
                    align: 'center',
                    minWidth: 100,
                },
                {
                    label: '创建人',
                    prop: 'cjr',
                    align: 'center',
                    minWidth: 70,

                },
                {
                    label: '创建日期',
                    prop: 'cjrq',
                    align: 'center',
                    minWidth: 100
                },

                {
                    label: '上报情况',
                    prop: 'sbqk',
                    align: 'center',
                    minWidth: 70
                },
                {
                    label: '下发状态',
                    prop: 'xfzt',
                    align: 'center',
                    minWidth: 70
                },
                {
                    label: '填报状态',
                    prop: 'tbzt',
                    align: 'center',
                    minWidth: 70
                },
                {
                    label: '操作',
                    prop: 'caozuo',
                    align: 'center',
                    width: 220,
                    render: (h, params) => {

                        if (this.userSwjgDm !== '11300000000') {
                            if(params.row.xfzt == '已下发' && params.row.tbzt == '已填报' ){
                                 return (
                                    <span>
                                        <el-button type="text" onClick={() => this.go('views', params.row)}>查看</el-button>
                                        <el-button type="text" disabled="disabled">填报</el-button>
                                         <el-button type="text" onClick={() => this.revoke(params.row)} >撤销</el-button>
                                    </span>
                                );
                            } else {
                               return (
                                    <span>
                                        <el-button type="text" onClick={() => this.go('views', params.row)}>查看</el-button>
                                        <el-button type="text" onClick={() => this.go('filing',params.row)}>填报</el-button>
                                        <el-button type="text" disabled="disabled" >撤销</el-button>
                                    </span>
                                );
                            }

                        } else {
                            if (params.row.xfzt == '未下发' ) {
                                return (
                                    <span>
                                        <el-button type="text" onClick={() => this.go('views', params.row)}>查看</el-button>
                                        <el-button type="text" onClick={() => this.go('edit',params.row)}>编辑</el-button>
                                        <el-button type="text" onClick={() => this.issued(params.row)}>下发</el-button>
                                        <el-button type="text" disabled="disabled" >撤销</el-button>
                                        <el-button type="text" onClick={() => this.del(params.row)}>删除</el-button>
                                    </span>
                                );
                            }else if (params.row.xfzt == '已下发' && params.row.tbzt == '未填报') {
                                return (
                                    <span>
                                        <el-button type="text" onClick={() => this.go('views', params.row)}>查看</el-button>
                                        <el-button type="text" disabled="disabled">下发</el-button>
                                        <el-button type="text" onClick={() => this.revoke(params.row)}>撤销</el-button>
                                        <el-button type="text" disabled="disabled">删除</el-button>
                                    </span>
                                );
                            } else if (params.row.xfzt == '已下发' && params.row.tbzt == '已填报') {
                                return (
                                    <span>
                                        <el-button type="text" onClick={() => this.go('views', params.row)}>查看</el-button>
                                        <el-button type="text" disabled="disabled">下发</el-button>
                                        <el-button type="text"  onClick={() => this.revoke(params.row)}>撤销</el-button>
                                        <el-button type="text" disabled="disabled">删除</el-button>
                                    </span>
                                );
                            } else {
                                return (
                                    <span>
                                        <el-button type="text" onClick={() => this.go('views', params.row)}>查看</el-button>
                                        <el-button type="text" onClick={() => this.go('edit',params.row)}>编辑</el-button>
                                        <el-button type="text" disabled="disabled">下发</el-button>
                                        <el-button type="text" onClick={() => this.revoke(params.row)}>撤销</el-button>
                                        <el-button type="text" onClick={() => this.del(params.row)}>删除</el-button>
                                    </span>
                                );
                            }
                        }


                    }
                }




            ],
            tableDatas: []
            , queryObj: {
                bgmc: '',
                kssj: '',
                jssj: '',
                pageNo: 1,
                pageSize: 20
            },
            total: 0,
            selectedRows: [],
            userSwjgDm: ''
        }
    },

    mounted() {
        this.userSwjgDm = JSON.parse(getUserInfo()).swjgDm
        this.getTableData();
    },
    methods: {

        searchForm(params) {
            console.log(params, '查询条件');
            this.queryObj.bgmc = params.bgmc || '';
            this.queryObj.kssj = params.kssj || '';
            this.queryObj.jssj = params.jssj || '';
            this.getTableData();
        },
        resetForm() {
            for (let key in this.queryObj) {
                if (key == 'pageNo') {
                    this.queryObj[key] = 1;
                } else if (key == 'pageSize') {
                    this.queryObj[key] = 20;
                } else {
                    this.queryObj[key] = '';
                }
            }
            this.getTableData();
        },
        getTableData() {
            this.loading = true;
            this.tableDatas = []
            let params = {
                bgmc: this.queryObj.bgmc,
                kssj: this.queryObj.kssj,
                jssj: this.queryObj.jssj,
                pageNum: this.queryObj.pageNo,
                pageSize: this.queryObj.pageSize,
            }
            queryList(params).then(res => {
                console.log(res)
                this.loading = false;
                if (res.code == 200) {
                    this.tableDatas = res.data.records.map(item => {
                        return {
                            ...item, notCheck: item.tbzt == '已填报' ? '1' : ''
                        }
                    })
                    this.total = res.data.total
                }
            })
        },
        issued(row) {
            xf({ id: row.id }).then(res => {
                if (res.code == 200) {
                    this.$message.success('下发成功')
                    this.getTableData()
                } else {
                    this.$message.success('下发失败')
                }
            })
        },
        revoke(row) {
            cx({ id: row.id }).then(res => {
                if (res.code == 200) {
                    this.$message.success('撤销成功')
                    this.getTableData()
                } else {
                    this.$message.success('撤销失败')
                }
            })
        },
        changepageNo(currPage) {
            this.queryObj.pageNo = currPage;
            this.getTableData();
        },
        changePageSize(pageSize) {
            this.queryObj.pageSize = pageSize;
            this.getTableData();
        },
        // 表格 多选 事件
        onSelectionChange(selectedRows) {
            this.selectedRows = selectedRows;
            console.log(selectedRows)
        },
        del(param) {

            if (param) {
                this.$confirm('该删除后将不可恢复，是否删除？', '友情提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    cancelButtonClass: 'JmconfirmCancelButton',
                    type: 'warning'
                }).then(() => {
                    this.loading = true;
                    let ids = [param.id]


                    sc({ ids: ids }).then(result => {
                        this.loading = false;
                        if (result && result.code == 200) {
                            this.$message.success('删除成功');
                            this.getTableData();
                        } else {
                            this.$message.error('删除数据失败！');
                        }
                    })
                        .catch(error => {
                            this.loading = false;
                        })
                })
            } else if (this.selectedRows.length > 0) {
                this.loading = true;
                this.$confirm('该删除后将不可恢复，是否删除？', '友情提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    cancelButtonClass: 'JmconfirmCancelButton',
                    type: 'warning'
                }).then(() => {
                    let ids = []
                    this.selectedRows.forEach(item => {
                        ids.push(item.id)
                    })
                    sc({ ids: ids }).then(result => {
                        this.loading = false;
                        if (result && result.code == 200) {
                            this.$message.success('删除成功');
                            this.selectedRows = []
                            this.getTableData();
                        } else {
                            this.$message.error('删除数据失败！');
                        }
                    })
                        .catch(error => {
                            this.loading = false;
                        })
                })

            } else {
                this.$message.error('请选择一条数据删除');
                return false;
            }
        },
        //待处理
        go(name, params) {
            this.$emit('changePage', name, params);
        },



    }
}
</script>

<style lang="scss" scoped>
.container {
    height: 100%;
    width: 100%;
    background-color: #fff;
    // padding: 8px;

    .btn {
        padding: 8px 8px 8px 0;
    }

    ::v-deep .undertxt {
        color: rgb(64, 158, 255);
        cursor: pointer;

        &:hover {
            text-decoration: underline;
        }
    }

    ::v-deep .undertxtRed {
        color: rgb(217, 0, 27);
        cursor: pointer;
        text-decoration: underline;
        &:hover {
        }
    }
}
::v-deep .el-date-editor {
    width: 220px;
}
</style>
